<template>
    <div>
        <el-page-header @back="goBack" :content="$route.name"></el-page-header>
        <el-form
            class="add"
            style="margin: 20px;"
            label-width="120px"
            :model="addCampaign"
            :rules="addRules"
            ref="addCampaign"
        >
            <div class="flex">
                <el-form-item label="活动名称：" prop="name">
                    <el-input clearable v-model="addCampaign.name" placeholder="请输入活动名称"></el-input>
                </el-form-item>
                <el-form-item label="外部链接：" prop="out_url">
                    <el-input clearable v-model="addCampaign.out_url" placeholder="请输入外部链接"></el-input>
                </el-form-item>
            </div>
            <div class="flex">
                <el-form-item label="优惠券名称：" prop="coupon_name">
                    {{addCampaign.coupon_name}}
                    <!-- <el-input clearable v-model="addCampaign.coupon_name" placeholder="请输入优惠券名称"></el-input> -->
                </el-form-item>
                <el-form-item label="截止时间：" prop="end_time">
                    {{addCampaign.end_time*1000 | formatDate}} {{addCampaign.end_time*1000 | formatDateBehind}}
                    <!-- <el-date-picker
                        v-model="addCampaign.end_time"
                        type="date"
                        :picker-options="pickerOptions"
                        placeholder="请选择优惠券截止时间"
                    ></el-date-picker> -->
                    <!-- <el-input clearable v-model="addCampaign.end_time" placeholder="请输入优惠券截止时间"></el-input> -->
                </el-form-item>
            </div>
            <div class="flex">
                <el-form-item label="优惠券数量：" prop="coupon_num">
                    {{addCampaign.coupon_num}}张
                    <!-- <el-input clearable v-model="addCampaign.coupon_num" placeholder="请输入优惠券数量"></el-input> -->
                </el-form-item>
                <el-form-item label="优惠券面额：" prop="coupon_money">
                    {{addCampaign.coupon_money}}元
                    <!-- <el-input clearable v-model="addCampaign.coupon_money" placeholder="请输入优惠券面额"></el-input> -->
                </el-form-item>
            </div>
            <div class="flex">
                <el-form-item label="活动类型：" prop="city">
                    {{addCampaign.city_type | cityType}}
                    <!-- <el-select clearable v-model="addCampaign.city">
                        <el-option
                            v-for="(item,index) in cityList"
                            :key="index"
                            :label="item.city"
                            :value="item.cityValue"
                        ></el-option>
                    </el-select> -->
                </el-form-item>
                <el-form-item label="城市：" prop="city" v-if="addCampaign.city_type === 1">
                    {{addCampaign.city}}
                    <!-- <el-select clearable v-model="addCampaign.city">
                        <el-option
                            v-for="(item,index) in cityList"
                            :key="index"
                            :label="item.city"
                            :value="item.cityValue"
                        ></el-option>
                    </el-select> -->
                </el-form-item>
                <el-form-item label="店铺：" prop="city" v-if="addCampaign.city_type === 2">
                    {{addCampaign.shop_id | filname}}
                    <!-- <el-select clearable v-model="addCampaign.city">
                        <el-option
                            v-for="(item,index) in cityList"
                            :key="index"
                            :label="item.city"
                            :value="item.cityValue"
                        ></el-option>
                    </el-select> -->
                </el-form-item>
                <el-form-item label="车辆类型：" prop="car_type">
                    {{addCampaign.car_type | cartype }}
                    <!-- <el-select clearable v-model="addCampaign.car_type" handlecupdate>
                        <el-option
                            v-for="(item,index) in car_typeList"
                            :key="index"
                            :label="item.car_type"
                            :value="item.car_typeValue"
                        ></el-option>
                    </el-select> -->
                </el-form-item>
            </div>
            <div class="flex">
                <el-form-item label="主页弹窗：" prop="homepage">
                    <el-switch v-model="addCampaign.homepage" :active-value="1" :inactive-value="0" @change="homepageChange()"></el-switch>
                </el-form-item>
                <el-form-item label="主页轮播：" prop="home_banner">
                    <el-switch v-model="addCampaign.home_banner" :active-value="1" :inactive-value="0" @change="home_bannerChange()"></el-switch>
                </el-form-item>
                <el-form-item label="个人中心轮播：" prop="my_banner">
                    <el-switch v-model="addCampaign.my_banner" :active-value="1" :inactive-value="0" @change="my_bannerChange()"></el-switch>
                </el-form-item>
                <el-form-item label="充值轮播：" prop="recharge_banner">
                    <el-switch v-model="addCampaign.recharge_banner" :active-value="1" :inactive-value="0" @change="recharge_bannerChange()"></el-switch>
                </el-form-item>
            </div>
            <el-form-item label="活动封面：" prop="cover">
                <el-upload
                    ref="cover"
                    v-model="addCampaign.cover"
                    action="/index.php/fileUpload/upload"
                    name="image"
                    :show-file-list="false"
                    list-type="picture-card"
                    :on-preview="coverPreview"
                    :on-success="handlecover"
                >
                    <img v-if="addCampaign.cover" :src="addCampaign.cover" class="avatar" />
                    <i v-else class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="活动内容图：" prop="content">
                <el-upload
                    ref="content"
                    v-model="addCampaign.content"
                    action="/index.php/fileUpload/upload"
                    name="image"
                    :show-file-list="false"
                    list-type="picture-card"
                    :on-preview="coverPreview"
                    :on-success="handlecontent"
                >
                    <img v-if="addCampaign.content" :src="addCampaign.content" class="avatar" />
                    <i v-else class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button
                    style="margin-left:50px;"
                    size="medium"
                    type="primary"
                    @click="confirm()"
                >确认修改</el-button>
            </el-form-item>
        </el-form>

        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
    </div>
</template>
<script>
import "../../../static/scss/page.scss";
import utils from "../../util/request";
import {formatDate} from "../../util/time.js"
var that
export default {
    data() {
        return {
            addUploadUrl: "", //上传服务器路径
            dialogVisible: false, //预览图片对话框
            dialogImageUrl: "", //预览图片的路径
            pickerOptions: {
                disabledDate(time) {
                    return (
                        time.getTime() <
                        new Date().getTime() - 24 * 60 * 60 * 1000
                    );
                }
            },
            routerrow: null,
            addCampaign: {
                id: "",
                name: "", //活动名称
                out_url: "", //外部链接
                coupon_name: "", //优惠券名称
                end_time: "", //优惠券截止时间
                coupon_num: "", //优惠券数量
                coupon_money: "", //优惠券面额
                city: "", //城市
                car_type: "", //车辆类型
                homepage: false, //主页弹框
                home_banner: false, //主页轮播
                my_banner: false, //个人中心轮播
                recharge_banner: false, //充值轮播
                cover: "", //活动封面图
                content: "" //活动内容图
            },
            addRules: {
                // 表单验证
                // city: [
                //     {
                //         required: true,
                //         message: "请选择城市",
                //         trigger: "change"
                //     }
                // ],
                name: [
                    {
                        required: true,
                        message: "请输入活动名称",
                        trigger: "blur"
                    }
                ],
                cover: [
                    {
                        required: true,
                        message: "请选择活动封面图片",
                        trigger: "change"
                    }
                ],
                content: [
                    {
                        required: true,
                        message: "请选择活动内容图片",
                        trigger: "change"
                    }
                ]
            },
            cityList: [
                {
                    city: "深圳",
                    cityValue: "深圳"
                },
                {
                    city: "北京",
                    cityValue: "北京"
                },
                {
                    city: "上海",
                    cityValue: "上海"
                },
                {
                    city: "广州",
                    cityValue: "广州"
                }
            ],
            car_typeList: [
                {
                    car_type: "小汽车",
                    car_typeValue: "小汽车"
                },
                {
                    car_type: "SUV",
                    car_typeValue: "SUV"
                },
                {
                    car_type: "MPV",
                    car_typeValue: "MPV"
                }
            ]
        };
    },
    filters:{
        // 活动类型
        cityType(car){
            if(car === 0){
                car = "通用"
            }else if(car === 1){
                car = "城市活动"
            }else if(car === 2){
                car = "门店活动"
            }else{return}
            return car
        },
        // 车型
        cartype(num){
            if(num === 0){
                num = "通用"
            }else if(num === 1){
                num = "小汽车"
            }else if(num === 2){
                num = "SUV"
            }else if(num === 3){
                num = "MPV"
            }else{return}
            return num
        },
        // 店铺
        filname(name){
            that.shopname.forEach(item=>{
                name === item.id ? name = item.name : "";
            })
            return name
        },
        // 时间
		formatDate(time){
			var date = new Date(time);
			return formatDate(date, 'yyyy-MM-dd');
		},
		formatDateBehind(time){
			var date = new Date(time);
			return formatDate(date, 'hh:mm:ss')
		}
    },
    methods: {
        goBack: function() {
            // 页头的返回
            this.$router.go(-1);
        },
        homepageChange() {
            // 主页弹框广告
            console.log("主页弹框广告");
            console.log(this.addCampaign.homepage);
        },
        home_bannerChange() {
            // 主页轮播广告
            console.log("主页轮播广告");
        },
        my_bannerChange() {
            // 个人中心轮播广告
            console.log("个人中心轮播广告");
        },
        recharge_bannerChange() {
            // 充值轮播广告
            console.log("充值轮播广告");
        },
        // 上传图片的成功的回执函数
        handlecover(resp,file,fileList){
            console.log(resp,file,fileList)
            this.addCampaign.cover = "https://dzylab.dpyun.site/storage/"+resp.data;
        },
        handlecontent(resp,file,fileList){
            console.log(resp,file,fileList)
            this.addCampaign.content = "https://dzylab.dpyun.site/storage/"+resp.data;
        },
        // 图片预览
        coverPreview(file) {
            // 点击文件列表中已上传的文件时的钩子
            console.log(file);
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        // coverPreview(file) {
        //     // 点击文件列表中已上传的文件时的钩子
        //     console.log(file);
        //     this.dialogImageUrl = file.url;
        //     this.dialogVisible = true;
        // },
        // coverExceedLimit() {
        //     // 项目图片超过数量限制事件
        //     this.$message({
        //         type: "error",
        //         message: "上传图片数量已达到限制!"
        //     });
        // },
        // coverUpload(file) {
        //     // 上传图片之前的钩子
        //     console.log(file);
        //     // return new Promise((resolve, reject) => {
        //     //     let _URL = window.URL || window.webkitURL;
        //     //     let isLt2M = file.size / 1024 / 1024 > 0.3; // 判定图片大小是否小于0.3MB
        //     //     // 这里需要计算出图片的长宽
        //     //     let img = new Image();
        //     //     img.onload = function() {
        //     //         file.width = img.width; // 获取到width放在了file属性上
        //     //         file.height = img.height; // 获取到height放在了file属性上
        //     //         let valid = img.width > 2000; // 图片宽度大于2000
        //     //         // console.log(11, file)
        //     //         // 这里我只判断了图片的宽度,compressAccurately有多个参数时传入对象
        //     //         if (valid || isLt2M) {
        //     //             compressAccurately(file, {
        //     //                 size: 100,
        //     //                 width: 690
        //     //             }).then(res => {
        //     //                 // console.log(33, res)
        //     //                 resolve(res);
        //     //             });
        //     //         } else resolve(file);
        //     //     }; // 需要把图片赋值
        //     //     img.src = _URL.createObjectURL(file);
        //     // });
        // },
        // coverUploadEvent(file) {
        //     // 图片上传至服务器
        //     console.log(file);
        //     // let formData = new FormData();
        //     // formData.append("file", file.file);
        //     // console.log(formData);
        //     // let instance = axios.create({
        //     //     baseURL: "https://admin.jljinhong.club/",
        //     //     headers: {
        //     //         Authorization: "Bearer " + localStorage.jh_token, //token
        //     //         "Content-Type": "multipart/form-data"
        //     //     }
        //     // });
        //     // instance.post("ImageUpload", formData).then(res => {
        //     //     console.log(res);
        //     //     if (res.data.code == 20000) {
        //     //         this.addCampaign.cover = res.data.data; //表单里的图片路径
        //     //         console.log(this.addCampaign.cover);
        //     //     }
        //     //     if (res.data.code == 20004) {
        //     //         this.$message({
        //     //             type: "error",
        //     //             message: "请重新登录!"
        //     //         });
        //     //         this.$router.push({ path: "/" });
        //     //     }
        //     //     if (res.data.code == 20008) {
        //     //         this.$message({
        //     //             type: "error",
        //     //             message: "图片过大，请上传小于5M的图片!"
        //     //         });
        //     //     }
        //     // });
        // },
        // coverRemove: function(file, fileList) {
        //     // 上传完成时在文件列表里移除的事件
        //     console.log(file, fileList);
        //     // let src = this.addCampaign.cover;
        //     // let indexOf = src.lastIndexOf("/"); //找到图片路径的最后一个斜杠
        //     // let fileName = src.substring(indexOf + 1); //最后一个斜杠加一表示找到了图片的名字中的第一位
        //     // console.log(fileName);
        //     // request
        //     //     .request("ImageDELETE?fileName=" + fileName, "delete")
        //     //     .then(res => {
        //     //         console.log(res);
        //     //         if (res.data.code == 20000) {
        //     //             this.$message({
        //     //                 type: "success",
        //     //                 message: "删除成功!"
        //     //             });
        //     //             this.addCampaign.cover = ""; //表单里的图片路径为空
        //     //         }
        //     //         if (res.data.code == 20001) {
        //     //             this.$message({
        //     //                 type: "error",
        //     //                 message: "删除失败或文件不存在！"
        //     //             });
        //     //         }
        //     //     });
        // },
        // contentPreview(file) {
        //     // 点击文件列表中已上传的文件时的钩子
        //     console.log(file);
        //     this.dialogImageUrl = file.url;
        //     this.dialogVisible = true;
        // },
        // contentExceedLimit() {
        //     // 项目图片超过数量限制事件
        //     this.$message({
        //         type: "error",
        //         message: "上传图片数量已达到限制!"
        //     });
        // },
        // contentUpload(file) {
        //     // 上传图片之前的钩子
        //     console.log(file);
        //     // return new Promise((resolve, reject) => {
        //     //     let _URL = window.URL || window.webkitURL;
        //     //     let isLt2M = file.size / 1024 / 1024 > 0.3; // 判定图片大小是否小于0.3MB
        //     //     // 这里需要计算出图片的长宽
        //     //     let img = new Image();
        //     //     img.onload = function() {
        //     //         file.width = img.width; // 获取到width放在了file属性上
        //     //         file.height = img.height; // 获取到height放在了file属性上
        //     //         let valid = img.width > 2000; // 图片宽度大于2000
        //     //         // console.log(11, file)
        //     //         // 这里我只判断了图片的宽度,compressAccurately有多个参数时传入对象
        //     //         if (valid || isLt2M) {
        //     //             compressAccurately(file, {
        //     //                 size: 100,
        //     //                 width: 690
        //     //             }).then(res => {
        //     //                 // console.log(33, res)
        //     //                 resolve(res);
        //     //             });
        //     //         } else resolve(file);
        //     //     }; // 需要把图片赋值
        //     //     img.src = _URL.createObjectURL(file);
        //     // });
        // },
        // contentUploadEvent(file) {
        //     // 图片上传至服务器
        //     console.log(file);
        //     // let formData = new FormData();
        //     // formData.append("file", file.file);
        //     // console.log(formData);
        //     // let instance = axios.create({
        //     //     baseURL: "https://admin.jljinhong.club/",
        //     //     headers: {
        //     //         Authorization: "Bearer " + localStorage.jh_token, //token
        //     //         "Content-Type": "multipart/form-data"
        //     //     }
        //     // });
        //     // instance.post("ImageUpload", formData).then(res => {
        //     //     console.log(res);
        //     //     if (res.data.code == 20000) {
        //     //         this.addCampaign.cover = res.data.data; //表单里的图片路径
        //     //         console.log(this.addCampaign.cover);
        //     //     }
        //     //     if (res.data.code == 20004) {
        //     //         this.$message({
        //     //             type: "error",
        //     //             message: "请重新登录!"
        //     //         });
        //     //         this.$router.push({ path: "/" });
        //     //     }
        //     //     if (res.data.code == 20008) {
        //     //         this.$message({
        //     //             type: "error",
        //     //             message: "图片过大，请上传小于5M的图片!"
        //     //         });
        //     //     }
        //     // });
        // },
        // contentRemove: function(file, fileList) {
            // 上传完成时在文件列表里移除的事件
            // console.log(file, fileList);
            // let src = this.addCampaign.cover;
            // let indexOf = src.lastIndexOf("/"); //找到图片路径的最后一个斜杠
            // let fileName = src.substring(indexOf + 1); //最后一个斜杠加一表示找到了图片的名字中的第一位
            // console.log(fileName);
            // request
            //     .request("ImageDELETE?fileName=" + fileName, "delete")
            //     .then(res => {
            //         console.log(res);
            //         if (res.data.code == 20000) {
            //             this.$message({
            //                 type: "success",
            //                 message: "删除成功!"
            //             });
            //             this.addCampaign.cover = ""; //表单里的图片路径为空
            //         }
            //         if (res.data.code == 20001) {
            //             this.$message({
            //                 type: "error",
            //                 message: "删除失败或文件不存在！"
            //             });
            //         }
            //     });
        // },
        confirm() {
            // 确认修改
            if (this.addCampaign.coupon_name != "") {
                this.addRules = {
                    // 表单验证
                    name: [
                        {
                            required: true,
                            message: "请输入活动名称",
                            trigger: "blur"
                        }
                    ],
                    // coupon_name: [
                    //     {
                    //         required: true,
                    //         message: "请输入优惠券名称",
                    //         trigger: "blur"
                    //     }
                    // ],
                    // end_time: [
                    //     {
                    //         required: true,
                    //         message: "请选择优惠券截止时间",
                    //         trigger: "change"
                    //     }
                    // ],
                    // coupon_num: [
                    //     {
                    //         required: true,
                    //         message: "请输入优惠券数量",
                    //         trigger: "blur"
                    //     }
                    // ],
                    // coupon_money: [
                    //     {
                    //         required: true,
                    //         message: "请输入优惠券面额",
                    //         trigger: "blur"
                    //     }
                    // ],
                    // city: [
                    //     {
                    //         required: true,
                    //         message: "请选择城市",
                    //         trigger: "change"
                    //     }
                    // ],
                    // car_type: [
                    //     {
                    //         required: true,
                    //         message: "请选择车辆类型",
                    //         trigger: "change"
                    //     }
                    // ],
                    cover: [
                        {
                            required: true,
                            message: "请选择活动封面图片",
                            trigger: "change"
                        }
                    ],
                    content: [
                        {
                            required: true,
                            message: "请选择活动内容图片",
                            trigger: "change"
                        }
                    ]
                };
            } else {
                this.addRules = {
                    // 表单验证
                    name: [
                        {
                            required: true,
                            message: "请输入活动名称",
                            trigger: "blur"
                        }
                    ],
                    cover: [
                        {
                            required: true,
                            message: "请选择活动封面图片",
                            trigger: "change"
                        }
                    ],
                    content: [
                        {
                            required: true,
                            message: "请选择活动内容图片",
                            trigger: "change"
                        }
                    ]
                };
            }
            this.$refs["addCampaign"].validate(valid => {
                if (valid) {
                    let that = this;
                    let data = {};
                    // 对比是否对原值有修改，没有不赋值
                    for(var i in this.addCampaign) this.addCampaign[i] !== this.routerrow[i] && this.addCampaign[i] !== "" ? data[i] = this.addCampaign[i] : '';
                    // data.end_time = timetamp(data.end_time)
                    //判断修改内容
                    JSON.stringify(data) !== "{}" 
                    ? (
                        data.id = this.addCampaign.id,
                        utils.request("/activity/update","post",JSON.stringify(data)).then(resp=>{
                            console.log(resp)
                            if(resp.data.code === 200){
                                this.$router.push("/campaign")
                                that.$message({
                                    message: "活动内容修改成功可在列表查看修改内容",
                                    type: "success"
                                })
                            }else{return}
                        })
                    ): (
                        this.$confirm('活动未修改，点击确定跳转活动页面，取消留在当前页面?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                        }).then(() => {
                            this.$router.push("/campaign")
                            this.$message({
                                type: 'success',
                                message: '未修改内容，已帮您跳转活动详情页!'
                            });
                        }).catch(() => {
                            this.$message('已帮您取消修改，可继续编辑');          
                        })
                    );
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        }
    },
    mounted() {},
    created() {
        utils.request("/shop/list","post",JSON.stringify({page:1,list_rows:999999999})).then(resp=>{
            this.shopname = resp.data.data.data.map((item)=>{
                return{
                    id: item["id"],
                    name: item["name"]
                }
            })
            this.routerrow = JSON.parse(this.$route.query.row);
            this.addCampaign = JSON.parse(this.$route.query.row)
            // console.log(row)
            // if (row !== "[object Object]") {
            //     for(var i in row) this.addCampaign[i] = row[i];
            // } else {this.$router.go(-1);}
        })
    },
    beforeCreate() {
        that = this;
    },
};
</script>

<style lang="scss" scoped>
.flex {
    display: flex;
    flex-flow: row wrap;
}
.avatar {
    //图片大小
    width: 100%;
    height: 100%;
    display: block;
}
</style>
